<template>
  <div class="fillcontain">
    <div class="grop_b">
      <div class="sensor_list groupInfo_list_nav">
        <span>设备总数：5</span>
        <span>激活设备：3</span>
        <span>当前设备：0</span>
      </div>
      <div class="tabs-main">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="用户管理" name="first">
            <div class="table_container">

              <div class="">
                <div class="machine_top machine_bor clearfix">
                  <span class="fl">设备信息</span>
                </div>

                <div class="machine_nac">
                  <div class="machine_nac_top machine_list_info clearfix">
                    <div class="fl bt">
                      分组名称
                    </div>
                    <div class="fl">
                      fefe
                    </div>
                    <div class="fl bt">
                      分组ID
                    </div>
                    <div class="fl">
                      fefe
                    </div>
                    <div class="fl bt">
                      分组负责人
                    </div>
                    <div class="fl">
                      fefe
                    </div>
                  </div>
                  <div class="machine_nac_top machine_list_info clearfix">
                    <div class="fl bt">
                      设备总数
                    </div>
                    <div class="fl">
                      fefe
                    </div>
                    <div class="fl bt">
                      激活设备
                    </div>
                    <div class="fl">
                      fefe
                    </div>
                    <div class="fl bt">
                      当前在线
                    </div>
                    <div class="fl">
                      fefe
                    </div>
                  </div>
                  <div class="machine_nac_top machine_list_info group_tab_l clearfix">
                    <div class="fl bt">
                      创建时间
                    </div>
                    <div class="fl">
                      fefe
                    </div>
                  </div>

                  <div class="machine_nac_top machine_list_info group_tab_l clearfix">
                    <div class="fl bt">
                      分组描述
                    </div>
                    <div class="fl">
                      eeeeee
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="second">
            <div class="table_container">
              <div class="tab_search">
                <span>设备型号：</span>
                <el-select v-model="select_cate" placeholder="设备型号" class="handle-select mr10">
                  <el-option key="1" label="广东省" value="广东省"></el-option>
                  <el-option key="2" label="湖南省" value="湖南省"></el-option>
                </el-select>

                <span class="mar4">设备名称：</span>
                <el-input v-model="select_word" placeholder="请输入传感器名称" class="search_inp"></el-input>
                <el-button type="primary" icon="search">搜索</el-button>
              </div>
              <div class="tab_but_list clearfix">
                <el-button type="primary" icon="plus" @click="addSensor()">添加设备</el-button>
                <el-button>批量删除</el-button>
                <el-button>刷新</el-button>

              </div>
              <div class="selected_box">
                <p><i class="el-icon-info"></i> 已选择<span>{{limit}}</span>项</p>
              </div>
              <div class="table_com">
                <el-table  ref="multipleTable" @selection-change="handleSelectionChange"
                           :data="tableData">
                  <el-table-column type="selection" width="55" align="center"></el-table-column>
                  <el-table-column
                    label="设备名称"
                    prop="name">
                  </el-table-column>
                  <el-table-column
                    label="设备ID"
                    prop="id">
                  </el-table-column>
                  <el-table-column
                    label="设备型号" sortable
                    prop="mode">
                  </el-table-column>
                  <el-table-column
                    label="设备厂家"
                    prop="factory">
                  </el-table-column>
                  <el-table-column
                    label="绑定传感器">
                    <template slot-scope="scope">
                      <el-button
                        size="mini" class="el-button el-button--text"
                        @click="bindSensor()">查看</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                      <el-button
                        size="mini" class="el-button el-button--text"
                        @click="showInfo()">查看</el-button>
                      <el-button
                        size="mini"
                        type="danger" class="el-button el-button--text"
                        @click="handleDelete()">从分组中删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="Pagination">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="20"
                    layout="total, prev, pager, next"
                    :total="count">
                  </el-pagination>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>


    <el-dialog title="添加设备" :visible.sync="dialogFormGroup" :close-on-click-modal="false">
      <div style="margin-bottom:20px">
        <el-select v-model="select_type" placeholder="请选择设备类型">
          <el-option key="1" label="广东省" value="广东省"></el-option>
          <el-option key="2" label="湖南省" value="湖南省"></el-option>
        </el-select>
        <el-input v-model="sensor_name" placeholder="请输入设备名称" class="search_inp"></el-input>
        <el-button>搜索</el-button>
      </div>
      <el-form :model="selectTable">
        <el-table  ref="multipleTable" :data="tableData"  @selection-change="handleSelection">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="name"
                           label="设备名称">
          </el-table-column>
          <el-table-column
            label="设备ID"
            prop="address">
          </el-table-column>
          <el-table-column
            label="设备型号"
            prop="description">
          </el-table-column>
          <el-table-column
            label="设备厂家"
            prop="description">
          </el-table-column>
        </el-table>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormGroup = false">取 消</el-button>
        <el-button type="primary" @click="updateShop">确 定</el-button>
      </div>
    </el-dialog>


  </div>

</template>

<script>
  export default {
    data() {
      return {
        currentPage: 1,
        selectTable: {},
        params: {},
        limit: 20,
        count: 0,
        dialogFormGroup:false,
        tableData: [{name:'edede'}],
        activeName:'first',
        select_cate:'',
        select_word:'',
        select_type:'',
        sensor_name:'',
        

      }
    },
    created() {

    },
    methods: {
      handleSizeChange() {},
      handleCurrentChange() {},
      updateShop() {},
      //nav
      handleClick(tab, event) {},
      //全选
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      //全选
      handleSelection(val) {
        this.multipleSelection = val
      },
      //添加设备
      addSensor(){
        this.dialogFormGroup = true
      },
      //绑定传感器查看
      bindSensor(index, row){
        
      },
      //查看
      showInfo(index, row){
        
      },
      handleDelete() {}



    },
  }
</script>

<style lang="less">
    .groupInfo_list_nav {
        padding: 20px;
        font-size: 14px;
    }
  .search_inp {display: inline-block;width: 200px!important;}
  .tabs-main .machine_nac{
      border-right: 1px solid #ddd;
      border-top: 1px solid #ddd;
  }
  .tabs-main .el-tabs__header {margin: 0;padding-left: 20px;}
  .tabs-main .el-tabs__content {
      border: 20px solid #F0F2F5;
  }
  .tabs-main .table_container {
      font-size: 14px;
      padding: 20px;
  }
  .tabs-main .machine_bor {
      margin-bottom: 20px;
      font-weight: bold;
  }
  .tabs-main .machine_list_info {
      display: flex;
      flex-direction: row;
    //   margin-bottom: 20px;
      overflow: hidden;
      border-bottom: 1px solid #ddd;
  }
  .tabs-main .machine_list_info .fl {
      flex: 1;
      padding: 10px;
  }
  .tabs-main .fl.bt {
      flex: 0 0 90px;
      border-left: 1px solid #ddd;
      border-right: 1px solid #ddd;
      text-align: center;
  }
  .tabs-main .tab_but_list {
      padding: 20px 0;
  }
  .tabs-main .selected_box {
      background: #E6F7FF;
      border: 1px solid #4094ff;
      padding: 10px;
      overflow: hidden;
      margin-bottom: 20px;
  }
  .grop_b .el-form-item{
    margin:0
  }
  .table_container{
    border-left-width:30px
  }
</style>
